<template>
  <div class="home-container">
    <!-- 全局布局 -->
    <section class="banner-container">
      <!-- 向下箭头 -->
      <div class="go-down" @click="goToNextPage">
        <Icon name="svg-spinners:bouncing-ball" size="56"/>
      </div>
      <div class="banner-content">
        <AnnCarousel :dailyImage="bannerStore.banners" :duration="5000" interval arrow/>
      </div>
    </section>
    <!-- 首页内容 -->
    <div class="home-content">
      <div class="left-content">
        <div>
          <AnnSearchCard @search="onSearch"/>
        </div>
        <div class="w-full">
          <AnnLoading :loading="loading">
            <AnnArticleCardList v-if="totalNum>0" :articles="articles"/>
            <AnnEmptyPage v-else/>
          </AnnLoading>
        </div>
        <!-- 翻页按钮 -->
        <AnnPagination
            :totalNum="totalNum"
            :totalPages="totalPages"
            :pageSize="queryParams.pageSize"
            :pageNum="queryParams.pageNum"
            @changePage="changePage"
        />
      </div>
      <!-- 右侧内容-->
      <div class="right-content">
        <!-- 公告-->
        <section>
          <AnnCard title="公告" icon-name="emojione-v1:bull-horn">
            <div class="flex justify-center text-lg">
              <span>
                {{ blogNotice.noticeTitle }}
              </span>
            </div>
          </AnnCard>
        </section>
        <!-- 我的信息 -->
        <section>
          <AnnCard title="作者" icon-name="twemoji:clown-face">
            <div class="avatar flex justify-center items-center">
              <div class="w-24 rounded-full overflow-hidden ">
                <img :src="authorInfo?.avatar" alt="Author Avatar" class="transition-transform duration-300
                transform-gpu hover:scale-105">
              </div>
            </div>
            <div class="text-center max-w-md">
              <p class="text-lg font-bold">{{ authorInfo?.nickName }}</p>
              <div class="flex justify-center items-center mt-2">
                <span>
                  <p class="font-bold text-sm">{{ authorInfo?.articleCount }}</p>
                  <p class="text-xs">文章</p>
                </span>
                <div class="divider divider-horizontal ml-2 mr-2"/>
                <span>
                  <p class="font-bold text-sm">{{ authorInfo?.articleLikedCount }}</p>
                  <p class="text-xs">点赞</p>
                </span>
                <div class="divider divider-horizontal ml-2 mr-2"/>
                <span>
                  <p class="font-bold text-sm">{{ authorInfo?.articleCommentedCount }}</p>
                  <p class="text-xs">评论</p>
                </span>
              </div>
              <div class="divider mb-2"/>
              <div class="flex flex-wrap justify-center gap-5">
                <div class="tooltip tooltip-bottom" data-tip="github">
                  <NuxtLink to="https://github.com/Aaron-AnHe?tab=repositories" target="_blank">
                    <Icon name="mdi:github" color="#1296DB" size="32"/>
                  </NuxtLink>
                </div>
                <div class="tooltip tooltip-bottom mt-0.5" data-tip="gitee">
                  <NuxtLink to="https://gitee.com/ahcode" target="_blank">
                    <Icon name="simple-icons:gitee" size="28" color="#c71d23"/>
                  </NuxtLink>
                </div>
                <div class="tooltip tooltip-bottom" data-tip="QQ">
                  <NuxtLink to="http://wpa.qq.com/msgrd?v=3&uin=198393789&site=qq&menu=yes" target="_blank">
                    <Icon name="ant-design:qq-circle-filled" color="#1296DB" size="32"/>
                  </NuxtLink>
                </div>
                <div class="tooltip tooltip-bottom" data-tip="哔哩哔哩">
                  <NuxtLink to="https://space.bilibili.com/479814203?spm_id_from=333.1007.0.0" target="_blank">
                    <Icon name="ri:bilibili-line" color="#1296DB" size="32"/>
                  </NuxtLink>
                </div>
              </div>
            </div>
          </AnnCard>
        </section>
        <!-- 分类信息 -->
        <section>
          <AnnCard title="分类" iconName="iconamoon:category-thin" :show-scroll="true">
            <ul class="menu bg-base-100 rounded-box">
              <li v-for="(item, index) in categories" :key="index"
                  :class="{ 'border-l-4 rounded-box border-blue-500': item.categoryId === selectedCategory }">
                <a @click="handleSelectCategory(item.categoryId)">
                  <span>{{ item.categoryName }}</span>
                </a>
              </li>
            </ul>
          </AnnCard>
        </section>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {useBannerStore} from "~/store/banner";
import type {BlogArticleWebVO, ArticleQuery} from "~/api/article/types";
import type {BlogCategoryWebVO} from "~/api/category/types";
import {queryArticleList} from "~/api/article";
import {queryCategoryList} from "~/api/category";
import type {BlogAuthorInfoVo} from "~/api/user/types";
import {queryBlogAuthorInfo} from "~/api/user";
import type {BlogNoticeWebVo} from "~/api/notice/types";
import {queryNotice} from "~/api/notice";

useHead({
  title: '首页',
  titleTemplate: title => `${title} - Annlcc's Blog`,
})
const loading = ref(true)
const bannerStore = useBannerStore();

// 分类状态
const selectedCategory = ref<null | string | number>(null);
// 文章列表状态
const articles = ref<BlogArticleWebVO[]>();
const categories = ref<BlogCategoryWebVO[]>();

const totalNum = ref();
const totalPages = ref(1);
const blogNotice = ref<BlogNoticeWebVo>({
  noticeId: '',
  noticeTitle: ''
})
const authorInfo = ref<BlogAuthorInfoVo>({
  nickName: "",
  avatar: "",
  articleCount: 0,
  articleCommentedCount: 0,
  articleLikedCount: 0
})
// 查询参数
const queryParams: ArticleQuery = reactive({
  tagIds: [],
  categoryId: undefined,
  pageNum: 1,
  pageSize: 9,
  keyword: undefined,
});

// 获取文章列表
const handleArticleList = async (queryParams: ArticleQuery) => {
  loading.value = true
  const {data: res} = await useAsyncData("queryArticleList", () =>
      queryArticleList(queryParams)
  );
  articles.value = res.value?.rows
  totalNum.value = res.value?.total;
  totalPages.value = Math.ceil(totalNum.value / queryParams.pageSize);
  loading.value = false
};
const getAuthorInfo = async () => {
  const {data: res} = await useAsyncData("queryAuthorInfo", () =>
      queryBlogAuthorInfo()
  );
  authorInfo.value = res.value?.data as BlogAuthorInfoVo
};


// 获取博客分类列表
const getCategories = async () => {
  const {data: categoryList} = await useAsyncData("queryCategoryList", () =>
      queryCategoryList()
  );
  categories.value = categoryList.value as BlogCategoryWebVO[];
};

// 选择分类
const handleSelectCategory = (categoryId: string | number) => {
  selectedCategory.value = selectedCategory.value === categoryId ? null : categoryId;
  queryParams.categoryId = selectedCategory.value as string;
  handleArticleList(queryParams);
};
const getNotice = async () => {
  const {data: res} = await useAsyncData("queryNotice", () =>
      queryNotice()
  );
  blogNotice.value = res.value as BlogNoticeWebVo
};

// 搜索功能
const onSearch = async (params: any) => {
  queryParams.keyword = params.keyword;
  queryParams.tagIds = params.selectedTags;
  queryParams.pageNum = 1;
  await handleArticleList(queryParams);
};

// 页面跳转
const goToNextPage = () => {
  window.scroll({top: window.innerHeight, left: 0, behavior: "smooth"});
};

const changePage = async (pageNum: number) => {
  queryParams.pageNum = pageNum
  await handleArticleList(queryParams)
}
getNotice()
handleArticleList(queryParams);
getCategories();
getAuthorInfo();
</script>
<style lang="less" scoped>
.home-container {
  overflow: hidden;
}

.banner-container {
  height: 100vh;
  display: flex;
  position: relative;
  align-items: center;

  .go-down {
    cursor: pointer;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: rgba(11, 250, 150, 0.941);
    animation: arrow-down 2s infinite;
  }

  .banner-content {
    width: 100%;
    height: 100%;
  }
}

.home-content {
  position: relative;
  min-height: 150vh;
  min-width: 40%;
  overflow: hidden;
  z-index: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: center;
}

.left-content {
  width: 100%;
  padding: 10px;
}

.right-content {
  display: none;
}

@media only screen and (min-width: 1000px) {
  .home-content {
    min-height: 150vh;
  }

  .left-content {
    width: calc(80% - 20px);
    margin-right: 20px;
    transition: all 0.4s ease-in-out;
  }

  .right-content {
    width: calc(20% - 20px);
    margin-left: 20px;
    padding: 10px;
    display: block;
    transition: all 0.4s ease-in-out;
  }
}


</style>
